<template>
  <div>
    <el-button @click="onClickAdd" type="primary" style="margin-top: 15px;"
      v-if="!dataList">新增联系人</el-button>
    <OrgTree v-if="tup.length>0" :horizontal="
                    horizontal" style="minWidth:100%" @onClickAdd="onClickAdd" @update="update"
      :dataList="dataList" @onerror="onerror" />
    <!-- 新增 编辑节点 -->
    <el-dialog :title="title" :visible.sync="dialogclick" :close-on-click-modal="false"
      v-loading="loading" append-to-body width="500px">
      <div style="padding:0 20px;">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="姓名：" prop="contactName"
            :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
            <el-input v-model="form.contactName" size="small" show-word-limit maxlength="10"
              placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item label="手机号：" prop="phone"
            :rules="{ required: true, message: '请输入手机号', trigger: 'blur' }">
            <el-input v-model="form.phone" size="small" maxlength="12" show-word-limit
              placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="职务：" prop="role"
            :rules="{ required: true, message: '请输入职务', trigger: 'blur' }">
            <el-input v-model="form.role" size="small" controls-position="right" />
          </el-form-item>
          <el-form-item label="是否是助理：" prop="isAssit">
            <el-select v-model="form.isAssit" placeholder="请选择" size="mini" style="width: 100%;">
              <el-option v-for="item in isAssitList" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" round size="small">取 消</el-button>
        <el-button type="primary" round size="small" :loading='ldstatus'
          @click="dialogclicks('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import UpdateModal from './updateModal';
import OrgTree from './updateModal/OrgTree';

import {
  queryCarryContacts,
  updateCarryContact,
  addCarryContact,
  delCarryContact,
  importExcel,
} from '@/service/carryContact';
import columns from './table';
// import { tableMixin } from '@/mixin/table';

export default {
  components: { UpdateModal, OrgTree },
  // mixins: [tableMixin],

  data() {
    return {
      data: [],
      dataList: null,
      tup: [],
      ldstatus: false,
      data: [{ name: '横向' }, { name: '纵向' }],
      isAssitList: [
        { label: '否', value: 'N' },
        { label: '是', value: 'Y' },
      ],
      loading: false,
      courStatu: 0,
      form: {
        carryName: '',
        role: '',
        contactId: '',
        phone: '',
        parentContactId: '',
        isAssit: 'N',
      },
      title: '',
      dialogclick: false,
      horizontal: true,
      query: {},
    };
  },

  methods: {
    // 取消
    cancel() {
      this.form = {
        carryName: '',
        role: '',
        contactId: '',
        phone: '',
        isAssit: 'N',
        parentContactId: '',
      };
      this.dialogclick = false;
    },
    // 横向纵向
    getVLO(index) {
      this.courStatu = index;
      if (index === 0) {
        this.horizontal = false;
      } else {
        this.horizontal = true;
      }
    },
    dialogclicks(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.ldstatus = true;
            console.log('this.from', this.form);
            const res = await addCarryContact(this.form);
            if (res.success) {
              this.$message.success('保存成功');
              this.getList();
            } else {
              this.$message.error('保存失败');
            }
            this.dialogclick = false;
            this.ldstatus = false;
          } else {
            this.ldstatus = true;
            const res = await updateCarryContact(this.form);
            if (res.success) {
              this.$message.success('保存成功');
              this.getList();
            } else {
              this.$message.error('保存失败');
            }
            this.dialogclick = false;
            this.ldstatus = false;
          }
        }
      });
    },
    // 列表
    async getList() {
      this.loading = true;
      const res = await queryCarryContacts({});
      let rows = [];
      if (res.data) {
        rows = [res.data];
      }
      this.tup = rows;
      if (rows.length > 0) {
        this.dataList = rows[0];
      }
      this.loading = false;
    },

    // 新增 节点
    async onClickAdd(data) {
      console.log('onClickAdd');
      this.cancel();
      if (data) {
        this.form.parentContactId = data.contactId;
      }
      this.dialogclick = true;
      this.title = '新增';
    },
    //  编辑节点
    async update(s) {
      console.log('s', s);
      this.dialogclick = true;
      this.title = '编辑';
      this.form = Object.assign({}, s);
    },
    // 删除节点
    async onerror(item) {
      let title = '';
      if (item.children && item.children.length > 0) {
        title = '当前节点存在子节点，删除即子节点连带删除，确认是否删除？';
      } else {
        title = '确定删除此节点吗?';
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const data = await delCarryContact(item);
        if (data.success) {
          this.$message({
            type: 'success',
            message: '删除成功',
          });
          this.getList();
        }
      });
    },
    getFD(fileObj) {
      const formData = new FormData();
      formData.append('file', fileObj.file);
      return formData;
    },
  },

  async mounted() {
    console.log('ff:' + this.tableData);
    console.log('ff11:' + this.clickQuery);

    await this.getList();
  },
};
</script>
<style>
.a {
}
</style>